<template>
  <div class="main">
    <vxe-table border :data="tableData" stripe highlight-current-row highlight-hover-row>
      <vxe-table-column type="seq" min-width="200"></vxe-table-column>
      <vxe-table-column sortable field="name" title="Name" min-width="200">
      </vxe-table-column>
      <vxe-table-column sortable field="address" title="AddressAddressAddressAddressAddressAddress" min-width="200">
      </vxe-table-column>
      <vxe-table-column sortable field="date" title="Date" min-width="200"></vxe-table-column>
    </vxe-table>

    <c-table title="列表" :data="tableData">
      <el-table-column prop="date" label="日期" min-width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" min-width="180"></el-table-column>
      <el-table-column prop="address" label="地址" min-width="180"></el-table-column>
    </c-table>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    msg: String
  },
  methods: {},
  data() {
    return {
      input: "",
      label: "",
      key: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "cccccccc 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "bbbbbbbbbb 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王大虎",
          address: "aaaaaaaaaaaa 1516 弄"
        }
      ]
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  background: #f6f6f6;
  padding: 20px 20px;
}
</style>
